<template>
  <div class="container">
    <div class="search">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入专业名称" v-model="value"> </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">点击搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="aside">
      <ul>
        <li>
          专业层次 <i class="el-icon-arrow-right"></i
          ><span
            v-for="(item, index) in cengci"
            :key="index"
            style="margin-right: 15px"
            :class="{ active: flag == index ? true : false }"
            @click="isActive(index)"
            >{{ item }}</span
          >
        </li>
        <li>
          专业种类 <i class="el-icon-arrow-right"></i
          ><span
            v-for="(item, index) in kelei"
            :key="index"
            style="margin-right: 15px"
            :class="{ active: flag2 == index ? true : false }"
            @click="isActive2(index, item)"
            >{{ item }}</span
          >
        </li>
      </ul>
      <el-divider></el-divider>
    </div>
    <pro-result :message="message"></pro-result>
  </div>
</template>

<script>
import ProResult from './ProResult'
export default {
  data() {
    return {
      value: '',
      cengci: ['本科', '专科'],
      kelei: ['哲学', '经济学', '法学', '教育学', '文学', '历史学', '理学', '工学', '农学', '医学', '管理学', '艺术学'],
      //层次标志位
      flag: 0,
      // 专业种类标志位
      flag2: null,
      //传递给子组件
      message:{}

    }
  },
  methods: {
    isActive(value) {
      this.flag = value;
      if (value == 1) {
        this.kelei = ['农林牧渔', '资源环境与安全', '能源动力与材料', '水利', '生物与化工', '轻工脂纸坊', '食品药品与粮食', '电子信息', '医药卫生', '财经商贸', '旅游', '文化艺术']
      }
      else if (value == 0) {
        this.kelei = ['哲学', '经济学', '法学', '教育学', '文学', '历史学', '理学', '工学', '农学', '医学', '管理学', '艺术学']
      }
    },
    isActive2(index, value) {
      this.flag2 = index
      this.$http({
        url: '/zxb/major/findByName',
        method: 'post',
        data: {
          name: value
        }
      }).then(res => {
        console.log(res.data.data);
        this.message=res.data.data
      })
    }
  },
  components: {
    ProResult
  }

}
    ProResult
</script>

<style lang="less" scoped>
.container {
  position: relative;
  top: 40px;
  width: 100%;
  // height: 500px;
  overflow: hidden;
  margin-bottom: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px 10px 20px 10px;
  .search {
    margin-bottom: 10px;
  }
  .aside {
    ul {
      margin: 0;
      padding: 0;
      li {
        list-style: none;
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        span:hover {
          cursor: pointer;
          color: red;
        }
      }
    }
    .active {
      color: red;
    }
    // .item {
    //   width: 100%;
    //   height: 150px;
    //   // border: 1px solid #ccc;
    //   .item_header {
    //     width: 60px;
    //     height: 40px;
    //     border: 1px solid #ccc;
    //     border-bottom: none;
    //   }
    //   .item_content {
    //     width: 100%;
    //     height: 120px;
    //     border: 1px solid #ccc;
    //   }
    // }
  }
}
</style>
